<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>Reset customization</title>
    <link rel="icon" href="../favicon.ico"/>

    <!-- Add Popoto default CSS styles -->
    <link rel="stylesheet" href="../node_modules/popoto/dist/popoto.min.css">
    <link rel="stylesheet" href="../shared.css">

    <style>
        .ppt-div-graph {
            height: 400px;
        }
    </style>
</head>
<body class="ppt-body">

<section class="ppt-section-main" style="height: 900px">
    <div class="ppt-section-header">
        <span class="ppt-header-span">Reset</span> customization
    </div>

    <div id="popoto-graph" class="ppt-div-graph">
        <!-- Graph will be generated here-->
    </div>

    <div class="ppt-section-header">
        <!-- The total results count is updated with a listener defined below -->
        RESULTS <span id="result-total-count" class="ppt-count"></span>
    </div>

    <div id="popoto-results" class="ppt-container-results">
        <!-- Results will be generated here -->
    </div>

</section>

<!-- Required scripts -->
<script src="../shared.js" charset="utf-8"></script>
<script src="../node_modules/d3/dist/d3.min.js" charset="utf-8"></script>
<script src="../node_modules/neo4j-driver-lite/lib/browser/neo4j-lite-web.min.js" charset="utf-8"></script>
<script src="../node_modules/popoto/dist/popoto.min.js" charset="utf-8"></script>

<script>
    var data = [
        "Charlize Theron",
        "Orlando Jones",
        "Patricia Clarkson",
        "Helen Hunt",
        "Victor Garber",
        "Jessica Thompson",
        "Robert Longo",
        "Tom Cruise",
        "Bill Paxton",
        "Michael Sheen",
        "Carrie-Anne Moss",
        "Val Kilmer",
        "Sam Rockwell",
        "Parker Posey",
        "Bruno Kirby",
        "Robert Zemeckis",
        "Philip Seymour Hoffman",
        "Billy Crystal",
        "Gary Sinise",
        "Stephen Rea",
        "Michael Clarke Duncan",
        "Dave Chappelle",
        "Tom Tykwer",
        "Penny Marshall",
        "Milos Forman",
        "Christina Ricci",
        "Brooke Langton",
        "Carrie Fisher",
        "Clint Eastwood",
        "John Goodman",
        "Kevin Pollak",
        "Howard Deutch",
        "Natalie Portman"];

    /**
     * URL used to access Neo4j REST API to execute queries.
     * Update this parameter to your running server instance.
     *
     * For more information on Neo4J REST API the documentation is available here: http://neo4j.com/docs/stable/rest-api-cypher.html
     */

    var driver = neo4j.driver(
        "neo4j+s://dff437fa.databases.neo4j.io",
        neo4j.auth.basic("popoto", "popotopassword"),
    );

    popoto.runner.DRIVER = driver

    // Activate the fit text option
    popoto.graph.USE_FIT_TEXT = true;

    // Add RESET_GRAPH option in toolbar
    popoto.tools.RESET_GRAPH = true;

    // Hide All other toolbar options
    popoto.tools.CENTER_GRAPH = false;
    popoto.tools.SAVE_GRAPH = false;
    popoto.tools.TOGGLE_TAXONOMY = false;
    popoto.tools.TOGGLE_FULL_SCREEN = false;
    popoto.tools.TOGGLE_VIEW_RELATION = false;

    // Hide node relation
    popoto.graph.DISABLE_RELATION = true;

    /**
     * Define the Label provider you need for your application.
     * This configuration is mandatory and should contain at least all the labels you could find in your graph model.
     *
     * In this version only nodes with a label are supported.
     *
     * By default If no attributes are specified Neo4j internal ID will be used.
     * These label provider configuration can be used to customize the node display in the graph.
     * See www.popotojs.com or example for more details on available configuration options.
     */
    popoto.provider.node.Provider = {
        "Person": {
            "returnAttributes": ["name", "born"],
            "constraintAttribute": "name"
        }
    };

    /**
     * Here a listener is used to retrieve the total results count and update the page accordingly.
     * This listener will be called on every graph modification.
     */
    popoto.result.onTotalResultCount(function (count) {
        document.getElementById("result-total-count").innerHTML = "(" + count + ")";
    });

    /**
     * Here a listener is used to customize the reset action.
     * This listener will be called on every click on reset graph button.
     */
    popoto.graph.onReset(function () {

        popoto.graph.mainLabel = {
            label: "Person",
            value: {
                name: data[Math.floor(Math.random() * (data.length - 1))]
            }
        };

        popoto.tools.reset();
    });

    driver.verifyConnectivity().then(function () {
        /**
         * Start popoto.js generation.
         * The function requires the label to use as root element in the graph.
         */
        popoto.start("Person");
    }).catch(function (error) {
        document.getElementById("modal").style.display = "block";
        document.getElementById("error-content").innerText = error;
        console.error(error)
    })
</script>
</body>
</html>
